04. Install Gulp

Do You Have NodeJS?

If you have not installed NodeJS or npm (a package manager for JavaScript), you will need to install these first before installing Gulp. You can check which version of npm and NodeJS that you have, respectively, by typing npm -v and node -v in your computer's terminal.

You can install NodeJS and npm by going to Node's official site and downloading the latest version of NodeJS.

💡 Terminal? What's That? 💡

Before continuing, make sure you're familiar with your computer's terminal. For example, how do we navigate through different directories? What about organizing or creating files in those directories? If you need a refresher (or a quick tutorial), take a few minutes to check out the first few sections of the Shell Workshop.

Get the Course Code

You can grab the course code from this repo on GitHub. The next sections in this lesson will be based on the folder named Lesson 2. It is recommended that you follow along using these files, but feel free to use any existing project you may have as well!

Install Gulp

Great! Now that you have NodeJS and npm installed, let's go ahead and install Gulp itself (note that this course uses Gulp 3.9.1). First, we'll install the command line interface for Gulp.

1. Install gulp-cli

Open up the terminal on your machine (e.g., Terminal on Mac, or Command Prompt on Windows) and enter in the following command:

npm install --g gulp-cli

This command uses npm to install the Gulp command line interface globally (i.e., rather than being installed in a single folder) on your computer.

2. Create package.json

Next, create a file named package.json. How do we go about doing this? While still in your terminal, navigate to the root of a project's directory (i.e., the "highest-level" directory in the hierarchy, or the folder that contains all other folders and files), and enter in this command:

npm init

Again, feel free to follow along in the root of any existing project you choose, or simply navigate to the Lesson 2 folder in the provided course code above.

Here's an example of what your terminal may look like at this point (note that I've cloned the course code onto my desktop, and I have navigated to the Lesson 2 folder):

So what happens after typing in npm init? You will be asked a few quick questions about a project name, description, etc. After answering those questions, the package.json file should be created automatically!

3. Install Gulp as a development dependency

Now, go ahead and install Gulp in the devDependencies of your package.json file. To do so, make sure you are still in the same root directory in your terminal. Then, type in this command:

npm install --save-dev gulp

This tells npm that the project depends on Gulp during development.

4. Confirm Successful Installation

Finally, let's confirm successful installation! Open up your package.json file. How do things look? The devDependencies part should have been automatically updated to look something like this:

  "devDependencies": {
    "gulp": "^3.9.1"
  }

At this point, enter gulp -v in your terminal. If your version of Gulp does not begin with the number 3, use the following command to install Gulp: npm install --save-dev gulp@3.9.1 (rather than using the command in the third step above). You should see something like this:

If you don't see a "CLI version" and a "Local version" listed after checking your version of Gulp (i.e., with gulp -v), take a look at the official Gulp Quick Start Guide. Detailed instructions are listed in the link.

⚠️ Seeing Errors with npm? ⚠️

When trying to run npm commands in your terminal, are you running into permissions errors? Feel free to review this article in the official documentation for resolution.

If you're still blocked, check out this post in StackOverflow.

Create the gulpfile

Note: If you are following along with the code provided in the Lesson 2 folder, a gulpfile.js file (with all the code from the rest of this lesson) has already been created. It is recommended that you delete this file and build it yourself as you progress through this lesson. Otherwise, you may run into missing module errors if you run gulp below

At this point, Gulp has been fully installed! Before we head into the next section, create a file named gulpfile.js in your project's root directory. Inside that file, type in the following code:

const gulp = require("gulp");

gulp.task("default", function() {
  // code for your default task goes here
});

What's happening here? We first tell NodeJS that Gulp is needed. We can access it with the variable gulp. Then, we define the "default" task.

Note that this task runs a function. Now, how do we go about actually running this "default" task? We can simply enter in gulp in the terminal! Try putting a console.log(); expression inside the function, then run the "default" task with the gulp command. What do you see?

We made our console log a string, and this is what we saw: